<template>
  <!-- 基础柱状图 -->
  <div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    // 千分位格式化并保留两位小数
    // formatPrice(price) {
    //   return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    // },
    initChart(chartData) {
      let _this = this
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          top: "4%",
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        legend: {
          left: "center", //可设定图例在左、右、居中
          bottom: "bottom",
          data: ["实际值", "参考值", "计划值"],
        },
        xAxis: [
          {
            type: "category",
            data: chartData.xAxis,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "实际值",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return _this.formatPrice(value);
              },
            },
            data: chartData.dataAV,
            itemStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#19B6F9", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#0071B8", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            name: "参考值",
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return _this.formatPrice(value);
              },
            },
            data: chartData.dataRV,
            itemStyle: {
              normal: {
                color: "#FA9200", //改变折线点的颜色
                lineStyle: {
                  color: "#FA9200", //改变折线颜色
                },
              },
            },
          },
          {
            name: "计划值",
            type: "line",
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return _this.formatPrice(value);
              },
            },
            itemStyle: {
              normal: {
                color: "#004FFA", //改变折线点的颜色
                lineStyle: {
                  color: "#004FFA", //改变折线颜色
                },
              },
            },
            data: chartData.dataPV,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
